<div class="row">
  <h3 ng-if="$ctrl.mixDatabase.title">{{$ctrl.mixDatabase.title}}'s data</h3>
  <p class="text-subtitle text-muted">
    Fill all of the following columns to create a new data for
    {{mixDatabaseTitle}} database.
  </p>
</div>
<form ng-class="{'submitted': submitted}" ng-submit="$ctrl.submit()">
  <div class="row">
    <div class="col-8"></div>
    <div class="col-4 mb-3">
      <actions
        ng-if="!$ctrl.hideAction"
        back-url="$ctrl.backUrl"
        ng-if="$ctrl.backUrl"
      ></actions>
    </div>
  </div>
  <div class="card">
    <h6
      ng-if="!$ctrl.hideAction"
      class="card-header position-sticky"
      style="top: 3.9rem; z-index: 12"
    >
      <span
        class="spinner-border spinner-border-sm text-primary"
        role="status"
        aria-hidden="true"
        ng-if="$ctrl.isBusy"
      ></span>
      <!-- <span ng-if="$ctrl.mixDatabaseName"
        >{{$ctrl.mixDatabaseName}}'s Data </span> -->

      <a
        class="btn btn-link text-primary btn-sm float-end py-0"
        ng-if="$ctrl.backUrl"
        href="{{$ctrl.backUrl}}"
      >
        <i class="fas fa-chevron-left"></i> List data
      </a>
      <!-- <a class="btn btn-link text-primary btn-sm float-end py-0" expanded="true"
        aria-controls="mixDatabaseId_{{$ctrl.mixDatabaseData.mixDatabaseId}} collapse">
        <span class="far fa-minus-square text-primary"></span> Show/Hide</a> -->
      <a
        href="#"
        ng-if="$ctrl.mixDatabaseId==1"
        ng-click="$ctrl.showContentFilter()"
        class="btn bnt-sm btn-primary px-3 text-white"
      >
        <i class="fas fa-search"></i> Search links
      </a>
      <button
        ng-if="$ctrl.parentId && $ctrl.isInRole('SuperAdmin')"
        type="button"
        data-bs-toggle="modal"
        data-bs-target="#modal-data-filter"
        class="btn btn-sm btn-link py-0 float-end"
        ng-disabled="$ctrl.isBusy"
      >
        <i class="fas fa-folder"></i> Browse Data
      </button>
      <button
        type="button"
        ng-click="$ctrl.reload()"
        class="btn btn-sm btn-link py-0 float-end"
        ng-disabled="$ctrl.isBusy"
      >
        <i class="fas fa-plus"></i> Create blank
      </button>
      <button
        type="button"
        ng-click="$ctrl.submit()"
        class="btn btn-sm btn-link btn-round pull-right float-end me-2 py-0"
        ng-disabled="$ctrl.isBusy"
      >
        <span
          class="spinner-border spinner-border-sm"
          role="status"
          aria-hidden="true"
          ng-if="$ctrl.isBusy"
          ng-show="!$ctrl.isBusy"
        ></span>
        <i class="fas fa-save"></i> Save current
      </button>
    </h6>
    <div
      id="mixDatabaseId_{{$ctrl.mixDatabaseData.mixDatabaseId}}"
      class="card-body show"
    >
      <div class="row">
        <div class="col-sm-12">
          <div
            ng-repeat="column in $ctrl.columns | orderBy:'priority' track by $index"
          >
            <mix-column-editor
              ng-if="column"
              parent-id="$ctrl.mixDatabaseData.id"
              level="$ctrl.level + 1"
              model="$ctrl.mixDatabaseData"
              column="column"
              back-url="$ctrl.childBackUrl"
            >
            </mix-column-editor>
          </div>
        </div>
      </div>
    </div>

    <div class="card-footer" ng-if="!$ctrl.hideAction">
      <button
        type="button"
        ng-click="$ctrl.submit()"
        class="btn btn-sm btn-primary btn-round float-end px-4"
        ng-disabled="$ctrl.isBusy"
      >
        <span
          class="spinner-border spinner-border-sm"
          role="status"
          aria-hidden="true"
          ng-if="$ctrl.isBusy"
          ng-show="!$ctrl.isBusy"
        ></span>
        <i class="fas fa-save"></i> Save current
      </button>
    </div>
  </div>
</form>
<mix-database-data-filter
  ng-if="$ctrl.parentId"
  callback="$ctrl.loadSelected()"
  mix-database-id="$ctrl.mixDatabaseId"
  mix-database-name="$ctrl.mixDatabaseName"
  selected-list="$ctrl.selectedList"
  columns="$ctrl.columns"
>
</mix-database-data-filter>
<modal-content-filter
  ng-if="$ctrl.mixDatabaseData"
  callback="$ctrl.loadSelectedLink(nav,type)"
></modal-content-filter>
